<template>
	<view>
		<view class="search">
			<view class="search-content">
				<view class="search-left">
					<uni-search-bar v-model="searchValue" cancelButton='none'></uni-search-bar>
				</view>
				<view class="search-right" @tap.stop="search">
					<text>搜索</text>
				</view>
			</view>
		</view>
		<view class="ul">
			<view class="li" v-for="pro in searchList" :key="pro.id">
				<navigator :url="pro.link_url">
					<view class="li-content">
						<view class="li-left">
							<image class="li-left-img" :src="pro.logo" mode=""></image>
						</view>
						<view class="li-right">
							<view class="li-right-top">
								<text>{{pro.title}}</text>
							</view>
							<view class="li-right-bottom">
								<text>{{pro.keyword}}</text>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<fh-toast ref="fhToast"></fh-toast>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				searchList: []
			}
		},
		onLoad(option) {
			let _this = this
			_this.searchValue = option.keyword
			_this.$nextTick(function () {
				if(_this.checkLogin()){
					_this.openid = uni.getStorageSync('openid');
					_this.getSearchList()
				}
			})
			
		},
		methods: {
			getSearchList() {
				let _this = this
				if(_this.searchValue == ''){
					_this.openToast({title:'请输入关键词'})
					return false
				}
				_this.http.apiResquest({
					url: 'api/index/search?keyword=' + _this.searchValue,
					method: 'GET'
				}).then(res=>{
					_this.searchList = res
				})
			},
			search() {
				this.getSearchList()
			},
			openToast: function({title, isHTMLString, isLoading, icon}) {
				this.$refs.fhToast.show({title, isHTMLString, isLoading, icon})
			},
			closeToast: function(){
				this.$refs.fhToast.hidden()
			}
		}
	}
</script>

<style>
.fh-title{
	font-size: 24rpx !important;
}
.search-content{
	display: flex;
}
.search-left{
	width: 84%;
}
.search-right{
	width: 16%;
	height: 104rpx;
	line-height: 104rpx;
	text-align: center;
}
.li-content{
	width: 90%;
	position: relative;
	left: 5%;
	display: flex;
	padding: 12rpx 0 4rpx 0;
	border-bottom: 2rpx solid #e0e0e0;
}
.li-left{
	width: 30%;
}
.li-left-img{
	height: 160rpx;
	width: 100%;
}
.li-right{
	width: 65%;
	position: relative;
	left: 5%;
}
.li-right-top{
	height: 60rpx;
	line-height: 60rpx;
	font-size: 30rpx;
	font-weight: bold;
}
.li-right-bottom{
	height: 100rpx;
	line-height: 50rpx;
	font-size: 26rpx;
	color: #8a8a8a;
	overflow-y: hidden;
}
.search{
	padding: 20rpx;
}
</style>
